<template>
  <div class="pwd-page-form">
    <div class="update-pwd_tips">
      为保证系统安全，首次登陆或密码使用超过90天后要求强制修改密码！密码要求包含数字和大小写字母，长度8-20位，且密码不能和上次密码相同。
    </div>
    <el-form ref="changePwdRef" :model="form" :label-width="100" :rules="formRules">
      <el-form-item label="原始密码" prop="password">
        <el-input v-model.trim="form.password" show-password autocomplete="new-password"> </el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="newPassword" required>
        <el-input v-model.trim="form.newPassword" show-password maxlength="20"> </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" required>
        <el-input maxlength="20" v-model.trim="form.confirmPassword" show-password> </el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button class="pwd-submit-btn" style="width: 200px" @click="logOut">更换账号</el-button>
        <el-button type="primary" class="pwd-submit-btn" style="width: 200px" @click="submit">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance } from "element-plus";
import { ref } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { HOME_URL, LOGIN_URL } from "@/config";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { SystemApi } from "@/api/modules";
const userStore = useUserStore();
const authStore = useAuthStore();
const router = useRouter();
const changePwdRef = ref<FormInstance>();
const form = ref({
  password: "",
  newPassword: "",
  confirmPassword: "",
});
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入新密码"));
  } else {
    const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[A-Za-z0-9]{8,20}$/;
    if (!regexp.test(value)) {
      return callback(new Error("密码由8-20位大小写字母和数字组成"));
    }
    if (form.value.confirmPassword !== "") {
      if (!changePwdRef.value) return;
      changePwdRef.value.validateField("confirmPassword", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入确认密码"));
  } else if (value !== form.value.newPassword) {
    callback(new Error("两次输入不一致!"));
  } else {
    callback();
  }
};
const formRules = {
  newPassword: [
    { validator: validatePass, trigger: "blur" },
    { required: true, trigger: "blur", message: "请输入新密码" },
  ],
  confirmPassword: [
    { validator: validatePass2, trigger: "blur" },
    { required: true, trigger: "blur", message: "请输入确认密码" },
  ],
  password: [{ required: true, trigger: "blur", message: "请输入原始密码" }],
};
const logOut = async () => {
  try {
    await SystemApi.logoutApi();
  } finally {
    // 2.清除 Token
    userStore.$reset();
    authStore.$reset();
    // 3.重定向到登陆页
    router.replace(LOGIN_URL);
  }
};
const submit = () => {
  changePwdRef.value.validate(valid => {
    if (valid) {
      const params = {
        newPwd: form.value.newPassword,
        oldPwd: form.value.password,
      };
      SystemApi.updatePwd(params).then(res => {
        if (res.code == 200) {
          ElMessage.success("修改成功");
          router.push(HOME_URL);
        }
      });
    }
  });
};
</script>
<style lang="scss" scoped>
.update-pwd_tips {
  margin: 20px;
  font-size: 16px;
}
.pwd-page-form {
  width: 600px;
  padding-top: 200px;
  margin: 0 auto;
  .pwd-submit-btn {
    width: 200px;
    margin: 20px auto;
  }
}
</style>
